<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="28" />
            <el-table-column prop="name" label="客户名称" width="180" sortable />
            <el-table-column prop="status" label="客户状态" width="110" sortable />
            <el-table-column label="客户星级" width="130" sortable>
                <template #default="scope">
                    <el-rate v-model="scope.row.star" colors="['#f7ba2a','#f7ba2a','#f7ba2a','#f7ba2a']" />
                </template>
            </el-table-column>
            <el-table-column prop="firstname" label="首联系人" width="105" sortable />
            <el-table-column prop="phone" label="手机号码" width="115" sortable />
            <el-table-column prop="endtime" label="最后跟进" width="130" sortable />
            <el-table-column prop="day" label="未跟进天数" width="120" sortable />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="primary" link :icon="SuccessFilled"
                        @click="changeStatus(scope.$index, scope.row)">跟进</el-button>
                    <el-button size="small" type="primary" link :icon="Edit"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="primary" link :icon="Upload">置顶</el-button>
                    <el-button size="small" type="primary" link :icon="Delete"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="bot">
            <div class="left">
                <div>
                    <input type="checkbox">
                    <span>全选</span>
                </div>
                <div>
                    <input type="checkbox">
                    <span>反选</span>
                </div>
                <div>
                    <span>更多操作</span>
                    <el-icon>
                        <ArrowDownBold />
                    </el-icon>
                </div>
            </div>
            <el-pagination v-model:current-page="page" background v-model:page-size="pagesize" :page-sizes="pageSize"
                layout="sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Delete, SuccessFilled, Edit, Upload, ArrowDownBold } from '@element-plus/icons-vue'
import { getCustom, delCustom, statusCustom } from '../../../api/custom.ts'
import { onMounted, ref, defineProps, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const props = defineProps(['search'])

const getData = async () => {
    console.log(props.search)
    let res = await getCustom({ page: page.value, pagesize: pagesize.value, name: props.search.inputOne, status: props.search.selectTwo, star: props.search.selectThere })
    tableData.value = res.data
    total.value = res.total
}
onMounted(async () => {
    getData()
})

const page = ref(1)
const total = ref(100)
const pagesize = ref(5)
const pageSize = ref([5, 10, 20, 30])

watch(
    props,
    async () => {
        console.log(props.search);
        getData()
    },
    { immediate: true }
)
const tableData = ref([])
interface User {
    id?: number
    name: string
    status: string
    star: string
    firstname: string
    phone: string
    endtime: string
    day: string
}

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    pagesize.value = val
    getData()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    page.value = val
    getData()
}

const router = useRouter()
const handleEdit = (index: number, row: User) => {
    console.log(index, row)
    router.push(`/home/custom/components/update?id=${row.id}&name=${row.name}&status=${row.status}&star=${row.star}&firstname=${row.firstname}&phone=${row.phone}`)
    getData()
}
const changeStatus = (index: number, row: User) => {
    console.log(index, row)
    ElMessageBox.confirm(
        '是否跟进？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let res = await statusCustom({ id: row.id, status: '已跟进' })
            console.log(res);
            getData()
            ElMessage({
                type: 'success',
                message: '跟进成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消跟进',
            })
        })
}
const handleDelete = (index: number, row: User) => {
    console.log(index, row)
    ElMessageBox.confirm(
        '确定删除该用户吗？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let res = await delCustom({ id: row.id })
            console.log(res);
            getData()
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
</script>

<style scoped>
.el-table {
    margin-top: 20px;
}

.el-pagination {
    float: right;
}

.bot {
    display: flex;
    align-items: center;
    padding: 20px 0;
    justify-content: space-between;
}

.left {
    width: 350px;
    display: flex;
    justify-content: space-evenly;
}

.left div {
    border: 1px solid #ccc;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}
</style>